<template>
	<view>
		<image class="top-bg"></image>
		<view class="top-box">
			<view @click="goUser" style="display: flex;justify-content: center;align-items: center;">
				<view style="padding-top: 60rpx;">
					<image class="user-img" :src="userinfo.headimg"></image>
				</view>
				<view style="padding-left: 20rpx;padding-top: 60rpx;">
					<view style="font-size: 36rpx;font-weight: 600;color: white;">{{userinfo.nickname}}</view>
					<view style="margin-top: 10rpx;" class="vip-name" v-if="userinfo.is_vipCard">{{userinfo.level}}</view>
				</view>
				<view v-if="check == 0" class="loginbtn" @click="loginbtn">立即登录</view>
				<!-- <view class="vip" v-if="!userinfo.level">开通会员</view> -->
			</view>
			<view class="qrCode" v-if="options.code" @click="CodeImgStutas=true">
				<image :src="qrcode" mode="" />
			</view>
			<!-- <navigator v-if="userinfo.is_vip==0" url="/pages/user/rechargevip/rechargevip" class="rechargevip">开通会员>></navigator>
			<view v-else class="rechargevip">普通会员</view>
			<view v-else class="rechargevip">什么牛马？你的lid不是0、1、2、3</view> -->
		</view>

		<!-- 会员卡 -->
		<view class="vip-box" @click="goVip">
			<image
				style="width: 695rpx; height: 130rpx;box-shadow: 1rpx 5rpx 18rpx 1rpx rgba(0,0,0,.3);border-radius: 15rpx;"
				src="/static/vip-bg.png"></image>
			<view class="go-buy p-absolute" v-if="vipinfo.name">{{vipinfo.name}}会员
				<u-icon name="arrow-right" color="#79633C" size="28"></u-icon>
			</view>
			<view class="go-buy p-absolute" v-else>立即购买
				<u-icon name="arrow-right" color="#79633C" size="28"></u-icon>
			</view>
			<view class="vip-expire p-absolute" v-else>会员将于{{userinfo.expire_time}}到期</view>
		</view>

		<view >
			<view style="background-color: white;">
				<view style="padding: 30rpx;">
					<view class="title">
						<view class="">
							我的账户
						</view>
						<view style="color:#79633C;" @click="myYue">立即充值
							<u-icon name="arrow-right" color="#79633C" size="28"></u-icon>
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-around;">
						<!-- 件数 -->
						<!-- <view class="top-list"
							style="padding-right: 100rpx;border-right: 1rpx solid #DDDDDD;padding-top: 20rpx;padding-bottom: 20rpx;">
							<view style="font-size: 30rpx;color: #333333;">
								{{userinfo.residue_num == null ? 0 : userinfo.residue_num}}
							</view>
							<view style="font-size: 28rpx;color: #606060;padding-top: 10rpx;">剩余洗衣件数</view>
						</view> -->
						<!-- 余额 -->
						<view @click="myYue" class="top-list"
							style="padding-top: 20rpx;padding-bottom: 20rpx;">
							<view style="font-size: 40rpx;color: #333333;">￥{{userinfo.money == null ? 0.00 : userinfo.money}}</view>
							<view style="font-size: 28rpx;color: #606060;padding-top: 10rpx;">余额</view>
						</view>
					</view>
				</view>
			</view>


			<view style="background-color: white;margin-top: 20rpx;padding: 0 30rpx;">

				<!-- <view @click="scanQRCode" class="cont-list">
					<view style="display: flex;align-items: center;">
						<image style="width: 40rpx;height: 40rpx;" src="../../static/sao.png"></image>
						<view style="padding-left: 32rpx;font-weight: 500;">扫码识别</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</view> -->
			
				<view @click="massage()" class="cont-list">
					<view style="display: flex;align-items: center;">
						<!-- <image style="width: 40rpx;height: 40rpx;" :src="imgUrl + 'user-massage.png'"></image> -->
						<view style="padding-left: 32rpx;font-weight: 500;">消息通知</view>
					</view>
					<view style="display: flex;align-items: center;">
						<view style="display: flex;align-items: center;" v-if="is_weidu > 0">
							<view style="font-size: 28rpx;color: #A3A3A3;padding-right: 10rpx;">查看通知</view>
							<view
								style="width: 12rpx;height: 12rpx;border-radius: 50%;background-color: #FF713B;margin-right: 10rpx;">
							</view>
						</view>
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</view>
				<view @click="address" class="cont-list">
					<view style="display: flex;align-items: center;">
						<!-- <image style="width: 40rpx;height: 40rpx;" :src="imgUrl + 'user-mine.png'"></image> -->
						<view style="padding-left: 32rpx;font-weight: 500;">地址管理</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="cont-list" @click="question">
					<view style="display: flex;align-items: center;">
						<!-- <image style="width: 40rpx;height: 40rpx;" :src="imgUrl + 'user-wt.png'"></image> -->
						<view style="padding-left: 32rpx;font-weight: 500;">常见问题</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="cont-list" @click="xieyi">
					<view style="display: flex;align-items: center;">
						<!-- <image style="width: 40rpx;height: 40rpx;" :src="imgUrl + 'user-xieyi.png'"></image> -->
						<view style="padding-left: 32rpx;font-weight: 500;">用户协议</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</view>
				<button type="default" open-type="contact" class="cont-list"
					style="background: #fff;font-size: 32rpx;height: 82rpx;">
					<view style="display: flex;align-items: center;">
						<!-- <image style="width: 40rpx;height: 40rpx;" :src="imgUrl + 'user-kefu.png'"></image> -->
						<view style="padding-left: 32rpx;font-weight: 500;font-size: 28rpx;">在线客服</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</button>
				<!-- <view @click="join" class="cont-list">
					<view style="display: flex;align-items: center;">
						<image style="width: 40rpx;height: 40rpx;" :src="imgUrl + 'user-xieyi.png'"></image>
						<view style="padding-left: 32rpx;font-weight: 500;">商家入驻</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</view> -->
				<view @click="about" class="cont-list">
					<view style="display: flex;align-items: center;">
						<!-- <image style="width: 40rpx;height: 40rpx;" :src="imgUrl + 'user-mine.png'"></image> -->
						<view style="padding-left: 32rpx;font-weight: 500;">关于我们</view>
					</view>
					<view style="display: flex;align-items: center;">
						<u-icon color="#ADADAD" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>


			<view
				style="padding-top: 130rpx;padding-bottom: 60rpx;display: flex;align-items: center;justify-content: center;">
				<text style="font-size: 24rpx;color: #656565;">客服热线</text>
				<text style="padding-left: 8rpx;color: #FA754F;font-size: 24rpx;">{{kefu_mobile}}</text>
			</view>
		</view>
		<view class="CodeImg" v-if="CodeImgStutas">
			<view class="CodeBox">
				<view class="c-title">请使用扫码枪扫码查看
					<!-- <u-icon name="download" size="34" style="position: absolute;right: 30rpx;" @click="downloadImg"></u-icon> -->
				</view>
				<view class="c_img">
					<w-qrcode :options="options" ref="qrcode" @press="longtap"></w-qrcode>
				</view>
				<view class="c_txt" @click="SaveCode">二维码风格<u-icon name="reload" size="30"></u-icon>
				</view>
			</view>
			<view class="close" @click="CodeImgStutas=false">
				<image :src="closeImg" mode="" />
			</view>
		</view>
		<tab-bar :selected="2"></tab-bar>

		<u-popup v-model="information" mode="center">
			<view class="">
				<u-field
					v-model="username"
					label="姓名"
					placeholder="请填写你的姓名"
				>
				</u-field>
				<u-field
					v-model="grade"
					label="年级"
					placeholder="请填写你的年级/系部"
				>
				</u-field>
				
				<u-field
					v-model="classname"
					label="班级"
					placeholder="请填写你的班级"
				>
				</u-field>

				<u-field
					v-model="dorm"
					label="宿舍"
					placeholder="请填写你的宿舍地址"
				>
				</u-field>
			</view>

			<u-button type="success" @click="classnamesub">确实提交</u-button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// imgUrl: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/', 
				// navArr: [{
				// 		title: "我的钱包",
				// 		logo: 'https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/wallet.png'
				// 	},
				// 	{
				// 		title: "客服消息",
				// 		logo: "https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/kefuxiaoxi.png"
				// 	},
				// 	{
				// 		title: '个人资料',
				// 		logo: "https://syxiyi.oss-cn-shenzhen.aliyuncs.com/frontend/img/gerenziliao.png"
				// 	}
				// ],
				userinfo: '',
				kefu_mobile: '',
				is_weidu: 0,
				store_id: '',
				qrcode: '',
				closeImg: '',
				CodeImgStutas: false,
				qrcodeimages: '',
				options: {
					code: '', // 生成二维码的值
					// border:{
					//     color: ['#F27121','#8A2387','#1b82d2'], //边框颜色支持渐变色 最多10种颜色 如果默认黑色此属性不需要传
					//     opacity: 0.6, //边框透明度 默认为1不透明 0~1
					//     lineWidth: 6, //边框宽度
					//     degree: 10 //边框圆角度数 默认5
					// },
					img: { // 二维码log配置 非必传
						src: '/static/logo.png', // 图片地址
						size: 40, // 图片大小
						degree: 15, // 圆角大小 如果type为round生效
						type: 'round', //图片展示类型 默认none 可选值  round圆角  circle圆 如果为round 可以传入degree设置圆角大小 默认 5
						color: '#ffffff', //图片周围的白色边框
						width: 8 //图片周围白色边框的宽度 默认5
					},
					bgColor: "", //二维码背景色 默认白色 非必传
					color: [''], // 二维码颜色支持渐变色 目前只支持最多10种颜色的渐变
					size: 440, // 460代表生成的二维码的宽高均为460rpx
				},
				keyIndex: 0,
				check:0,
				vipinfo:[],
				business:{},
				newarr:{},
				information:false,
				grade:'',
				classname:'',
				username:'',
				dorm:''
			}
		},
		onLoad() {
			let loginstatus = uni.getStorageSync('token');
			if(loginstatus)
			{
				this.check = 1
				// this.getkefu()
			}
			
		},
		onShow() {
			if(this.check)
			{
				this.store_id = uni.getStorageSync('store_id')
				this.getUserInfo()
				this.getWeiDu()
				this.getQrCode()
				this.myvip()
			}
		},
		onPullDownRefresh() {
			if(this.check)
			{
				this.getUserInfo()
				this.getQrCode()
				uni.stopPullDownRefresh()
			}
			
		},
		methods: {
			//lyr
			// 会员卡查询
			myvip()
			{
				this.$ajaxRequest.get(this.baseUrl + 'user/vip',{},false)
				.then(res=>{
					this.vipinfo = res.data.data
				})
			},
			loginbtn()
			{
				uni.navigateTo({url:'/pages/login/login/index'})
			},
			// async downloadImg(e){
			// 	//获取相册授权
			// 	uni.getSetting({
			// 		success(res) {
			// 			if (!res.authSetting['scope.writePhotosAlbum']) {
			// 				uni.authorize({
			// 					scope: 'scope.writePhotosAlbum',
			// 					success() {
			// 						//这里是用户同意授权后的回调
			// 						this.saveImgToLocal();
			// 					},
			// 					fail() {//这里是用户拒绝授权后的回调
			// 						// this.openSettingBtnHidden=false
			// 					}
			// 				})
			// 			} else {//用户已经授权过了
			// 				this.saveImgToLocal();
			// 			}
			// 		}
			// 	})
			// },
			// async downloadImg(){
			// 	const data = await this.$refs.qrcode.GetCodeImg()
			//     console.log(data)
			// 	uni.downloadFile({
			// 		url: data.tempFilePath, //仅为示例，并非真实的资源
			// 		success: (res) => {
			// 			console.log(res)
			// 			if (res.statusCode === 200) {
			// 				console.log('下载成功');
			// 				uni.saveImageToPhotosAlbum({
			// 					filePath: res.tempFilePaths,
			// 					success: function () {
			// 						console.log('save success');
			// 					},
			// 					fail: function(err) {
			// 						console.log(err)
			// 						// uni.showToast({
			// 						// 	title: "保存失败",
			// 						// 	icon: "none"
			// 						// });
			// 					}
			// 				});
			// 			}
			// 		}
			// 	});
			// },
			longtap(e) { //手指长按事件
				console.log(e);
			},
			async SaveCode() { //颜色切换
				this.keyIndex++
				switch (this.keyIndex) {
					case 1:
						this.options.color = ['#11998e', '#F27121', '#8A2387']
						break;
					case 2:
						this.options.color = ['#38ef7d', '#8A2387', '#1b82d2']
						break;
					case 3:
						this.options.color = ['#8A2387', '#11998e', '#38ef7d']
						break;
					case 4:
						this.options.color = ['#1b82d2', '#38ef7d', '#F27121']
						break;
					case 5:
						this.options.color = ['#11998e', '#8A2387', '#1b82d2']
						break;
					case 6:
						this.options.color = ['#F27121', '#8A2387', '#1b82d2']
						break;
					case 7:
						this.options.color = ['#11998e', '#38ef7d', '#F27121', '#8A2387', '#1b82d2']
						break;
					case 8:
						this.keyIndex = 0
						this.options.color = ['#000000', ]
						break;
				}
				this.CodeImgStutas = false
				let set = setInterval(() => {
					clearInterval(set)
					this.CodeImgStutas = true
				}, 100);
			},
			getQrCode() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/index/orderQrCode', {}, true).then(res => {
					if (res.data.code == 200) {
						this.options.code = res.data.data
						// console.log("订单二维码",this.options.code)
						// this.options.code = 'https://www.taobao.com'
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getUserInfo() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.userinfo = res.data.data
						console.log('this.userinfo',this.userinfo);
						uni.setStorageSync('UserInfo',res.data.data)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
					this.business=uni.getStorageSync('UserInfo');
					console.log(this.business,'打印用户信息');
				})
			},
			// 客服热线
			getkefu() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/index/customer', {}, false).then(res => {
					if (res.data.code == 200) {
						this.kefu_mobile = res.data.data.customer_tel
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 未读消息
			getWeiDu() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/index/news', {}, true).then(res => {
					if (res.data.code == 200) {
						this.is_weidu = res.data.data.num
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			address() {
				uni.navigateTo({
					url: '/pages/yuyue/lijiyuyue/index?type=1'
				})
			},
			goUser() {
				if(this.check)
				{
					uni.navigateTo({
						url: 'userinfo/index'
					})
				}
			},
			massage() {
				uni.navigateTo({
					url: 'massage/index'
				})
			},
			about() {
				uni.navigateTo({
					url: 'about/index'
				})
			},
			join(){
				uni.navigateTo({
					url: 'join/index'
				})
			},
			question() {
				uni.navigateTo({
					url: '/pages/user/question/index'
				})
			},
			goVip() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/order/new', {
					id:this.business.id
				}, true).then(res => {
					if (res.data.code == 200) {
						// console.log(res.data.data,'打印new数据');
						this.newarr=res.data.data
						if( this.newarr.classname==null || this.newarr.grade==null || this.newarr.dorm==null){
							this.information=true
						}else{
							uni.navigateTo({
								url: '/pages/vip/index'
							})
						}
						// console.log(this.newarr,'打引new数组');
					}
				})

				
			},
			xieyi() {
				uni.navigateTo({
					url: '/pages/user/xieyi/index'
				})
			},
			myYue() {
				uni.navigateTo({
					url: '/pages/user/wallet/index'
				})
			},

			// 扫一扫方法
			scanQRCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log("条码类型：" + res.scanType);
						console.log("条码内容：" + res.result);
					uni.showToast({
						title: "扫描成功",
						duration: 2000,
						});
					uni.navigateTo({
						url: "/pages/user/wallet/chongzhi/index",
					});
				   },
				});
			},

			// 提交年级等信息
			classnamesub(){
				if(this.grade==''){
					uni.showToast({
						title: '年级信息必须填写',
						icon: 'none'
					})
					return
				}

				if(this.classname==''){
					uni.showToast({
						title: '班级信息必须填写',
						icon: 'none'
					})
					return
				}

				if(this.username==''){
					uni.showToast({
						title: '姓名必须填写',
						icon: 'none'
					})
					return
				}

				if(this.dorm==''){
					uni.showToast({
						title: '宿舍地址必须填写',
						icon: 'none'
					})
					return
				}

				this.$ajaxRequest.get(this.baseUrl + 'shop/order/classnamesub', {
					grade:this.grade,
					classname:this.classname,
					username:this.username,
					dorm:this.dorm,
					id:this.business.id
				}, true).then(res => {
					if (res.data.code == 200) {
						this.information=false
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							complete(){
								uni.navigateTo({
									url: '/pages/vip/index'
								})
							}
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
						})
					}
				})
			}
		}
	}
</script>

<style>
	.loginbtn{
		margin-top: 30px;
		margin-left: 10px;
		width: 100px;
		height: 40px;
		background-color: #FA754F;
		border-radius: 10px;
		text-align: center;
		line-height: 40px;
		color: white;
		font-size: 1.2em;
	}

	.rechargevip {
		position: absolute;
		right: 30rpx;
		bottom: 95rpx;
		color: #6c5835;
	}

	page {
		background-color: #FBF7F9;
	}

	.cont-list {
		border-bottom: 1rpx solid #F4F4F4;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-list {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.title {
		font-size: 30rpx;
		color: #333333;
		font-weight: 600;
		padding-left: 20rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
	}

	.title::after {
		top: 50%;
		margin-top: -16rpx;
		position: absolute;
		content: '';
		background-color: #FF713B;
		width: 6rpx;
		height: 32rpx;
		left: 0rpx;
	}

	.but {
		bottom: 140rpx;
		position: fixed;
		width: 690rpx;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-radius: 40rpx;
		color: #7B7B7B;
		font-size: 26rpx;
		background-color: #E8E8E8;
		margin-left: 30rpx;
	}

	.nav-box {
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-list {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.top-bg {
		position: absolute;
		width: 750rpx;
		height: 409rpx;
		background:rgba(255,128,62,1);
	}

	.top-box {
		height: 350rpx;
		/* padding-top: 160rpx; */
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.user-img {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		border: 2rpx solid #FFFFFF;
	}

	.vip-name {
		padding: 6rpx 20rpx 6rpx 20rpx;
		display: inline-block;
		text-align: center;
		background: rgba(255, 171, 126, 1);
		border-radius: 26rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 133, 71, 1);
	}

	.vip-exprie {
		color: #fff;
		font-size: 26rpx;
		opacity: 0.6;
	}

	.vip-box {
		position: relative;
		/* top: -90rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		/* padding: 30rpx 0 40rpx; */
		z-index: 99;
	}

	.p-absolute {
		position: absolute;
		top: 50%;
		right: 60rpx;
		transform: translateY(-50%);

	}

	.go-buy {
		width: 180rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: #79633C;
		background: #DCC08E;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
	}

	.vip-expire {
		font-size: 28rpx;
		color: #DCC08E;
		/* color: rgba(255,255,255,0.6); */
	}

	.vip {
		margin-top: 200rpx;
		margin-left: 50rpx;
		width: 200rpx;
		height: 50rpx;
		border-radius: 20px;
		line-height: 50rpx;
		text-align: center;
		color: #79633C;
		background: #DCC08E;
	}

	.qrCode {
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		right: 80rpx;
		top: 200rpx;
	}

	.qrCode image {
		width: 100%;
		height: 100%;
		border-radius: 4rpx;
	}

	.CodeImg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(44, 44, 44, 0.349);
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.CodeBox {
		width: 560rpx;
		/* height: 740rpx; */
		background: white;
		margin: 200rpx auto 0;
		z-index: 9999;
		text-align: center;
		border-radius: 10rpx;
	}

	.c_img {
		width: 440rpx;
		height: 440rpx;
		margin: auto;
	}

	.c_img image {
		width: 100%;
		height: 100%;
	}

	.c_txt {
		font-size: 34rpx;
		padding-bottom: 40rpx;
		/* margin-top: 30rpx; */
	}

	.close {
		position: absolute;
		top: 200rpx;
		left: 500rpx;
		width: 80rpx;
		height: 80rpx;
		right: 0;
		margin: auto;
	}

	.close image {
		width: 100%;
		height: 100%;
	}

	.c-title {
		background: #F0F0F0;
		padding: 30rpx;
		font-size: 30rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		position: relative;
	}
</style>
